<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8"/>
    <title>Vue示例</title>

</head>

<body>
<div id="app">
    总价：{{prices}}
</div>
<script charset="utf-8" src="../js/vue.min.js" type="text/javascript"></script>
<script type="text/javascript">
    new Vue({
        el: '#app',
        data: {
            package1: [{
                name: 'iPhone7',
                price: 7199,
                count: 2
            }, {
                name: 'iPad',
                price: 2888,
                count: 1
            }],
            package2: [{
                name: 'apple',
                price: 3,
                count: 5
            }, {
                name: 'banana',
                price: 2,
                count: 10
            }]
        },
        computed: {
            prices: function () {
                var prices = 0;
                for (var i = 0; i < this.package1.length; i++) {
                    prices += this.package1[i].price * this.package1[i].count;
                }
                for (var i = 0; i < this.package2.length; i++) {
                    prices += this.package2[i].price * this.package2[i].count;
                }
                return prices;
            }
        }
    })
</script>
</body>

</html>
